<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{$websiteData['titles']}} - 文章列表</title>
    <meta name="description" content="{{$websiteData['description']}}" />
    <meta name="keywords" content="{{$websiteData['keywords']}}" />
    <link rel="stylesheet" href="/static/home/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/home/sPage/jquery.sPage.css">
    <style type="text/css">
        .num{
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .demo{
            margin-bottom: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
@include('home.index.header');

<main class="container">
{{--    <section class="page-title">--}}
{{--        <h2>文章列表</h2>--}}
{{--        <p>所有文章的完整列表</p>--}}
{{--    </section>--}}

    <div class="content-container">

        <div class="posts-list">
            <div id="content"></div>
            <div id="myPage" class="demo"></div>
        </div>


        <aside class="sidebar">
            <div class="search-box">
                <h3>搜索</h3>
                <form>
                    <input type="text" id="article_title" placeholder="输入关键词...">
                    <button type="button" id="searchData">搜索</button>
                </form>
            </div>
            <div class="recent-posts">
                <h3>最新文章</h3>
                <ul>
                    @foreach($lastArticleData as $val)
                    <li><a href="{{route('home.article.info')}}?id={{$val['id']}}&indexActive={{$indexActive}}">{{$val['title']}}</a></li>
                   @endforeach
                </ul>
            </div>
        </aside>
    </div>
</main>

@include('home.index.footer');
{{--<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>--}}
<script src="/static/home/js/jquery.js"></script>
<script src="/static/home/sPage/jquery.sPage.min.js"></script>
<script>
$(function () {
    ajaxPage(1);
    function ajaxPage(page) {
        var p = page || 1;
        var article_title = $("#article_title").val();
        $.ajax({
            type: "GET",
            url: "{{route('home.article.listData')}}",
            data: {
                page: p,
                pageSize: 10,
                article_title:article_title,
                topicId:{{$topicId}},
                indexActive:{{$indexActive}}
            },
            dataType: "json",
            success: function(data) {
                //数据处理
                var _html="";
                var articleData = data.data;
                $.each(articleData,function (index,val) {
                     _html+='<div class="post-item">';
                     _html+='  <img src="'+val.thumb+'" alt="文章图片">';
                     _html+='  <div class="post-content">';
                     _html+='    <h3><a href="'+val.url+'">'+val.title+'</a></h3>';
                     _html+='    <p class="post-excerpt">'+val.brief+'</p>';
                     _html+='    <div class="post-meta">';
                     _html+='     <span class="post-date">'+val.publish_time+'</span>';
                     _html+='     <span class="post-category"></span>';
                     _html+='    </div>';
                     _html+='   </div>';
                     _html+='</div>';
                });
                $("#content").html(_html);
                // ...
                // 调用分页插件
                $("#myPage").sPage({
                    page: p, //当前页码
                    pageSize: 10, //每页显示多少条数据，默认10条
                    total: data.total, //数据总条数,后台返回
                    totalTxt:"共{total}条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
                    showTotal:true,//是否显示总条数，默认关闭：false
                    showSkip:true,//是否显示跳页，默认关闭：false
                    showPN:true,//是否显示上下翻页，默认开启：true
                    prevPage:"上一页",//上翻页文字描述，默认“上一页”
                    nextPage:"下一页",//下翻页文字描述，默认“下一页”
                    backFun: function(page) { //点击分页按钮回调函数，返回当前页码
                        ajaxPage(page);
                    }
                });
            },
            error: function(e) {
                console.log(e);
            }
        });
    };
    //点击搜素
    $("#searchData").click(function(){
        ajaxPage(1);
    });
});
</script>
</body>
</html>
